<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器标签</title>
</head>
<body>
<!--
  在html中,存在两种容器标签,所谓的容器标签,就是将页面划分出一块区域
  在这块区域中可以设置统一的外观效果
    div:块级容器标签,其区域中可以存在块级元素与行级元素
    span:行级容器标签,只能存在行级元素
-->
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<hr>
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
<hr>
<div style="color:red;background-color: gray;height: 300px">
  <marquee>欢迎使用块级容器标签</marquee>
  <h1>这是标题</h1>
  <b><i><font>这是一个加粗且倾斜的字体</font></i></b><br>
  <b><i><font>这是一个加粗且倾斜的字体</font></i></b>
</div>
<hr>
<span style="color:green;background-color: pink;">
  这是行级容器
  <b>这是加粗的字体</b>
  <i>这是倾斜的字体</i>
  <!--
    在行级容器中存在块级元素时,元素内容会超出容器区域,但是样式生效了
    此时可以认为行级容器已经被破坏了,开发中不允许出现
  -->
  <h2>这是块级元素</h2>
</span>
</body>
</html>